<template>
    <div id="float-ball" @click='clickShow'>HTTP</div>
    <div id="http-request-app" v-if=showRequest>
        <div class="app-container">
            <div class="form-group">
                <label for="domain">Domain:</label>
                <input id="domain" type="text" v-model="currentDomain" placeholder="e.g. https://example.com">
            </div>
            <div class="form-group">
                <label for="path">Path:</label>
                <input id="path" type="text" placeholder="e.g. /api/data" v-model="requestPath">
            </div>
            <div class="form-group">
                <label for="method">Method:</label>
                <select id="method" v-model="requestType">
                    <option value="GET">GET</option>
                    <option value="POST">POST</option>
                </select>
            </div>
            <div class="form-group" id="body-group" v-if="requestType === 'POST'">
                <label for="body">Body:</label>
                <textarea id="body" placeholder="Enter request body" v-model="requestBody"
                    @blur="formatData"></textarea>
            </div>
            <button id="send-button" class="send-button" @click="sendRequest">Send Request</button>
            <div v-if="responseData" style="  margin-top: 10px;margin-bottom: 10px;">请求时间：{{ requestTime }}</div>
            <pre id="response" class="response" v-if="responseData">{{ responseData }}</pre>
            <!-- <div id="history-container" class="history-container">
                <h3>Request History</h3>
                <ul id="history-list"></ul>
            </div> -->
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
import { GM_xmlhttpRequest } from '$';

const showRequest = ref(false)
const currentDomain = ref(window.location.origin)
const requestPath = ref('')
const requestBody = ref('')
const requestType = ref('GET')
const responseData = ref('')
const requestTime = ref(new Date().toLocaleString())
function clickShow() {
    showRequest.value = !showRequest.value
}

function sendRequest() {
    GM_xmlhttpRequest({
        method: requestType.value,
        url: currentDomain.value + requestPath.value,
        headers: {
            'Cookie': document.cookie,
            'Content-Type': 'application/json'
        },
        data: requestType.value === 'POST' ? requestBody.value : undefined,
        onload: (res) => {
            try {
                const jsonResponse = JSON.parse(res.responseText);
                responseData.value = JSON.stringify(jsonResponse, null, 2);
            } catch (e) {
                responseData.value = res.responseText;
            }
            requestTime.value = new Date().toLocaleString()
        },
        onerror: (error) => {
            responseData.value = 'Error: ' + JSON.stringify(error);
        }
    });
}

function formatData() {
    try {
        if (requestBody.value) {
            requestBody.value = JSON.stringify(JSON.parse(requestBody.value), null, 2)
        }
    } catch (e) {
        console.log(e)
    }

}

</script>
<style scoped>
.app-container {
    position: fixed;
    bottom: 10px;
    right: 10px;
    background: #f9f9f9;
    padding: 20px;
    border: 1px solid #ccc;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    z-index: 10000;
    font-family: Arial, sans-serif;
    max-height: 90vh;
    overflow-y: auto;
    width: 30%;
}

.form-group {
    margin-bottom: 10px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.form-group textarea {
    height: 100px;
    resize: vertical;
    overflow-y: auto;
}

.send-button {
    display: inline-block;
    padding: 10px 20px;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.send-button:hover {
    background-color: #0056b3;
}

.response {
    margin-top: 10px;
    white-space: pre-wrap;
    word-wrap: break-word;
    background: #f4f4f4;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
    max-height: 50vh;
    overflow-y: auto;
}

.history-container {
    margin-top: 20px;
}

.history-container h3 {
    margin-bottom: 10px;
}

.history-container ul {
    list-style-type: none;
    padding: 0;
}

.history-container li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.history-container li span {
    cursor: pointer;
    color: #007bff;
}

.history-container li span:hover {
    text-decoration: underline;
}

.history-container li button {
    background: none;
    border: none;
    color: red;
    cursor: pointer;
}
</style>